const DISTANCE = 150;
const DURATION = 500;
const map = new WeakMap();

const ob = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      //该元素和视口相交
      //播放该元素的动画
      console.log(entry.target);
      // entry.target.getAnimations()
      map.get(entry.target);
      if (animation) {
        animation.play();
        ob.unobserve(entry.target);
      }
    }
  }
});
export default {
  //使用 style会和行内的styleh互相影响 ，所以采用animation API
  // el.style.transform = "translateY(150px)";
  mounted(el) {
    const animation = el.animate(
      [
        {
          transform: `translateY(${DISTANCE}px)`,
          opcity: 0.5,
        },
        {
          transform: "translateY(0)",
          opcity: 1,
        },
      ],
      {
        duration: DURATION,
        easing: "ease-in-out",
      }
    );
    animation.pause();
    ob.observe(el);
    map.set(el, animation);
  },
  unmounted(el) {
    ob.unobserve(el);
  },
};
